<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<!-- 
	SVN (SubVersion) SourceCode Controll
ppppppppp
  alicia
 -->

<style type="text/css">

body {
 font:76% normal verdana,arial,tahoma;
}

h1, h2 {
 margin:0px;
 font-size:1.2em;
}

p {
 margin:0px 0px 1em 0px;
 padding:0px;
}

.balls img {
 position:absolute;
 width:12px;
 height:12px;
}

</style>
<script type="text/javascript">

// <![CDATA[

var balls = [];
var canvasX = 0;
var canvasY = 0;
var timer = null;
var m_lastX = 0;
var m_lastY = 0;
var M_SPACE = 24;
var B_VMIN = 5;
var B_VMAX = 5;
var B_WIDTH = 13;
var B_HEIGHT = 13;

function rnd(n) {
  return Math.random()*n;
}

function rndI(n) {
  return parseInt(rnd(n));
}

function createBall(oParent) {
  oParent.appendChild(balls[0].cloneNode(true));
  initBall(balls[balls.length-1]);
  window.status = balls.length;
}

function createBallAtMouse(e) {
  e = e?e:event;
  createBall(document.getElementById('ball-container'));
  with (balls[balls.length-1]) {
    _x = e.clientX;
    _y = e.clientY;
  }
}

function initBall(oBall) {
  oBall._x = rnd(canvasX);
  oBall._y = rnd(canvasY);
  oBall._vX = B_VMIN+rnd(B_VMAX)*(Math.random()>0.5?1:-1);
  oBall._vY = B_VMIN+rnd(B_VMAX);
}

function moveBall(oBall) {
  oBall._x += oBall._vX;
  oBall._y += oBall._vY;
  oBall.style.left = oBall._x+'px';
  oBall.style.top = oBall._y+'px';
  if ((oBall._vX>0 && oBall._x+oBall._vX+B_WIDTH>canvasX) || (oBall._vX<0 && oBall._x+oBall._vX<0)) oBall._vX *= -1;
  if ((oBall._vY>0 && oBall._y+oBall._vY+B_HEIGHT>canvasY) || (oBall._vY<0 && oBall._y+oBall._vY<0)) oBall._vY *= -1;
}

function animateStuff() {
  for (var i=balls.length; i--;) {
    moveBall(balls[i]);
  }
}

function startAnimation() {
  if (!timer) timer = setInterval(animateStuff,20);
}

function stopAnimation() {
  if (!timer) return false;
  clearInterval(timer);
  timer = null;
}

function mouseDown(e) {
  e = e?e:event;
  m_lastX = e.clientX;
  m_lastY = e.clientY;
  document.onmousemove = mouseMove;
  document.onmouseup = mouseUp;
}

function mouseMove(e) {
  e = e?e:event;
  if (Math.abs(e.clientX-m_lastX)>M_SPACE || Math.abs(e.clientY-m_lastY)>M_SPACE) {
    m_lastX = e.clientX;
    m_lastY = e.clientY;
    createBallAtMouse(e);
  }
  return false;
}

function mouseUp() {
  document.onmousemove = null;
  document.onmouseup = null;
}

function init() {
  balls = document.getElementById('ball-container').getElementsByTagName('img');
  for (var i=balls.length; i--;) {
    initBall(balls[i]);
  }
  getWindowCoords();
  startAnimation();
  document.onmousedown = mouseDown;
}

getWindowCoords = (navigator.userAgent.toLowerCase().indexOf('opera')>0||navigator.appVersion.toLowerCase().indexOf('safari')!=-1)?function() {
  canvasX = window.innerWidth;
  canvasY = window.innerHeight;
}:function() {
  canvasX = document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth;
  canvasY = document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight;
}

window.onresize = getWindowCoords;
window.onload = init;

// ]]>

</script>
</head><body>

<h1>Interval-based animation</h1>

<p>
 Click and drag to create more.<br>
 Clicka, arrasta e solta o mouse!
</p>

<p>
 <button onclick="startAnimation()">Start</button>
 <button onclick="stopAnimation()">Stop</button>
</p>


<div id="ball-container" class="balls">
                <img style="left: 398.205px; top: 259.643px;" src="ball.gif" alt="">
                <img style="left: 904.885px; top: 54.8314px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 1082.49px; top: 280.17px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 369.362px; top: 109.442px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 399.181px; top: 503.039px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 116.116px; top: 53.9144px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 789.056px; top: 69.5575px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 1119.78px; top: 168.68px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 725.245px; top: 139.481px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 411.65px; top: 266.36px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 139.439px; top: 513.307px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 885.485px; top: 89.5897px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 1.83296px; top: 17.6632px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 476.476px; top: 164.547px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 945.806px; top: 148.865px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 149.782px; top: 237.653px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 749.891px; top: 128.205px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 223.222px; top: 36.0685px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 1026.45px; top: 173.048px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 807.703px; top: 63.9628px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 1060.48px; top: 475.19px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 222.159px; top: 512.833px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 104.315px; top: 248.295px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 447.89px; top: 192.009px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 492.149px; top: 239.539px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 878.71px; top: 64.9377px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 879.451px; top: 443.165px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 1093.85px; top: 187.97px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 649.668px; top: 491.005px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 990.421px; top: 102.682px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 595.971px; top: 87.4715px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 806.164px; top: 259.337px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 586.682px; top: 145.803px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 191.9px; top: 494.55px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 731.234px; top: 19.2093px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 1041.95px; top: 365.955px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 576.782px; top: 468.813px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 914.73px; top: 399.623px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 339.319px; top: 116.618px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 1104.67px; top: 365.974px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 1019.82px; top: 456.906px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 614.932px; top: 460.728px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 809.08px; top: 185.306px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 650.154px; top: 230px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 920.03px; top: 117.584px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 350.177px; top: 73.4359px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 888.208px; top: 31.4876px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 544.451px; top: 265.462px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 251.906px; top: 41.3807px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 885.889px; top: 124.636px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 88.7489px; top: 316.813px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 764.614px; top: 224.81px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 239.053px; top: 445.867px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 807.336px; top: 4.65029px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 262.937px; top: 67.9449px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 235.525px; top: 343.026px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 888.716px; top: 172.425px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 124.387px; top: 490.614px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 469.014px; top: 38.9404px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 467.231px; top: 326.035px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 716.941px; top: 479.171px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 839.368px; top: 406.309px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 457.943px; top: 260.635px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 919.101px; top: 74.9541px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 1098.46px; top: 125.165px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 690.597px; top: 491.979px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 124.044px; top: 424.782px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 450.362px; top: 402.259px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 978.155px; top: 287.543px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 49.3699px; top: 246.938px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 212.679px; top: 108.956px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 926.369px; top: 205.983px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 903.523px; top: 131.103px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 482.068px; top: 133.328px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 838.294px; top: 61.9645px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 920.659px; top: 491.091px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 312.794px; top: 405.341px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 442.777px; top: 392.606px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 345.844px; top: 139.703px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 507.386px; top: 337.31px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 754.164px; top: 345.546px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 728.803px; top: 203.247px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 996.569px; top: 31.0086px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 624.88px; top: 84.4324px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 1072.18px; top: 502.176px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 844.842px; top: 181.183px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 720.736px; top: 153.247px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 795.749px; top: 141.694px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 52.4744px; top: 272.698px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 451.004px; top: 465.664px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 996.643px; top: 319.325px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 923.574px; top: 333.972px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 462.588px; top: 197.44px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 192.641px; top: 153.257px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 77.124px; top: 240.247px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 137.495px; top: 121.139px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 792.38px; top: 19.3436px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 805.311px; top: 50.6467px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 787.273px; top: 428.461px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 1060.19px; top: 15.294px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 315.928px; top: 45.3897px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 519.069px; top: 173.991px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 613.2px; top: 445.314px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 1092.23px; top: 379.76px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 940.705px; top: 436.822px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 46.9475px; top: 502.585px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 606.842px; top: 497.109px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 1138.86px; top: 275.016px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 113.046px; top: 72.697px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 29.3714px; top: 196.19px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 50.2828px; top: 309.107px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 528.113px; top: 444.833px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 632.453px; top: 194.145px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 108.251px; top: 169.501px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 409.965px; top: 298.561px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 278.885px; top: 384.137px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 635.917px; top: 455.012px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 1045.03px; top: 253.973px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 92.9769px; top: 389.79px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 732.029px; top: 380.783px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 24.6491px; top: 428.246px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 921.613px; top: 99.8136px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 828.897px; top: 205.417px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 520.11px; top: 55.9px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 805.055px; top: 95.5037px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 556.439px; top: 248.562px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 800.052px; top: 362.259px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 80.0893px; top: 278.656px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 23.4669px; top: 322.785px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 522.818px; top: 309.195px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 1067.51px; top: 20.8221px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 595.581px; top: 141.532px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 525.005px; top: 19.5664px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 124.794px; top: 74.4006px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 539.797px; top: 56.6272px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 466.932px; top: 65.1234px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 178.236px; top: 294.835px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 471.646px; top: 60.3361px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 1106.03px; top: 117.659px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 377.191px; top: 403.477px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 74.4398px; top: 58.0265px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 374.011px; top: 203.588px;" src="Animation_files/ball.gif" alt="">
                <img style="left: 107.322px; top: 63.1809px;" src="Animation_files/ball.gif" alt="">
</div>

</body>
</html>